<template>
  <div id="evaluation">
    <Row :gutter="20">
      <i-col :xs="12"
             :md="8"
             :lg="6"
             v-for="(infor, i) in inforCardData"
             :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow
                    :color="infor.color"
                    :icon="infor.icon"
                    :icon-size="36">
          <count-to :end="infor.count"
                    count-class="count-style" />
          <p class="count-title">{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20"
         style="margin-top: 10px;">
      <i-col :md="24"
             :lg="16"
             style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;"
                     :value="barData"
                     text="每周用户活跃量" />
        </Card>
      </i-col>
      <i-col :md="24"
             :lg="8"
             style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;"
                     :value="pieData"
                     ref="pie"
                     text="本年度课程评价统计"></chart-pie>
        </Card>
      </i-col>
    </Row>
    <evaluation-list></evaluation-list>
  </div>
</template>
<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import EvaluationList from '@/views/common/evaluation-common/evaluation-list'
import { queryTeacherClassReport, queryAnnualStatement, queryCourseEvaluation } from '@/api/data'
import { mapState } from 'vuex'
export default {
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar
  },
  data () {
    return {
      inforCardData: [
        {
          title: '累计上课',
          icon: 'ios-book-outline',
          count: 803,
          color: '#2d8cf0'
        },
        {
          title: '五星好评课程',
          icon: 'md-thumbs-up',
          count: 232,
          color: '#19be6b'
        },
        {
          title: '累计专家参与评论',
          icon: 'ios-people',
          count: 142,
          color: '#ff9900'
        },
        {
          title: '累计学生参与评论',
          icon: 'md-school',
          count: 657,
          color: '#ed3f14'
        }
      ],
      pieData: [
        { value: 0, name: '非常好' },
        { value: 0, name: '较好' },
        { value: 0, name: '一般' },
        { value: 0, name: '较差' },
        { value: 0, name: '特差' }
      ],
      barData: {
        month: [],
        commentTotal: [],
        courseTotal: [],
      }
    }
  },
  mounted () {
    this.getList()
  },
  components: { EvaluationList, InforCard, CountTo, ChartPie, ChartBar },
  methods: {
    getList () {
      queryTeacherClassReport({ id: this.userId }).then((res) => {
        let val = Object.values(res.data)
        this.inforCardData.map((item, index) => {
          item.count = val[index] * 1
        })
      })
      queryAnnualStatement().then(res => {
        if (res.data) {
          this.barData = {
            month: [],
            commentTotal: [],
            courseTotal: []
          }
          let data = res.data
          if (data && data.Comment.length > 0) {
            data.Comment.forEach((item, index) => {
              this.barData.month.push(item.month)
              this.barData.commentTotal.push(item.commentTotal)
              this.barData.courseTotal.push(data.Course[index].courseTotal)
            })
          }
          // if (data && data.length > 0) {
          //   data.forEach(item => {
          //     this.barData.month.push(item.month)
          //     this.barData.commentTotal.push(item.commentTotal)
          //     this.barData.courseTotal.push(item.courseTotal)
          //   })
          // }
        }
      })
      queryCourseEvaluation().then(res => {
        if (res.data) {
          let data = []
          res.data.forEach(item => {
            switch (item.levelName) {
              case 'tc':
                this.pieData[4].value = item.percent
                break;
              case 'jc':
                this.pieData[3].value = item.percent
                break;
              case 'yb':
                this.pieData[2].value = item.percent
                break;
              case 'h':
                this.pieData[1].value = item.percent
                break;
              case 'fch':
                this.pieData[0].value = item.percent
                break;
            }
          })
          // this.pieData = data
          this.$refs.pie.resize()
        }
      })
    }
  },
  computed: {
    ...mapState({
      hasGetInfo: state => state.user.hasGetInfo,
      userName: state => state.user.userName,
      userId: state => state.user.userId,
    })
  }
}
</script>
<style lang="scss">
#evaluation {
  width: 90%;
  margin: 30px auto;
  .ivu-row{
    margin-bottom: 20px;
  }
  .count-style {
    font-size: 50px;
  }
}
</style>
